import React, { useState, useEffect } from "react";
import { Map, MapvglView, MapvglLayer,Marker,InfoWindow } from "react-bmapgl";
import axios from "../service/index";

export default function Cinema() {
  let [point, setPoint] = useState([]);
  useEffect(() => {
    axios.get("/api/cinemas/infos/loca").then((res) => {
      console.log(res);
      if (res.errNo === 0) {
        setPoint(
          res.paginate.slice(0, 100).map((item) => {
            return {
              geometry: {
                type: "Point",
                coordinates: [
                  Number(item.gpsaddress.split(",")[0]),
                  Number(item.gpsaddress.split(",")[1]),
                ],
              },
            };
          })
        );
      }
    });
  }, []);
  return (
    <div>
      Cinema
      <Map
        style={{ height: 500 }}
        center={new window.BMapGL.Point(116.404, 39.915)}
        zoom={11}
        enableScrollWheelZoom={true} //开启鼠标滚轮缩放
      >
        {/* 图层 */}
        <MapvglView effects={["bright"]}>
          <MapvglLayer
            type="PointLayer"
            data={point}
            options={{
              blend: "lighter",
              size: 12,
              color: "rgb(255, 53, 0, 0.6)",
            }}
          />
        </MapvglView>
        {/* 点标注 */}
        <Marker
          position={new window.BMapGL.Point(116.404449, 39.914889)}
          enableDragging
        />
        {/* 信息窗口 */}
         <InfoWindow
          position={new window.BMapGL.Point(116.404, 39.915)}
          title="北京天安门"
          text="花**到此一游"
          onClickclose={e => {console.log(e)}}
        />
      </Map>
    </div>
  );
}
